<script lang="ts" setup name="Store">
import { EditPen } from '@element-plus/icons-vue'
import { cloneDeep } from 'lodash-es'
import { ProTableInstance } from '~/library/components/ProTable/interface'
import { getStoreTypeListAPI } from '~/src/api/common'
import { StoreManagement } from '~/src/api/interface/storeManagement'
import { createStoreMarketDetailAPI, editStoreAPI, getStoreAPI, getStoreMarketDetailAPI } from '~/src/api/storeManagement'
import { storeColumn } from '../columns'
import StoreDialog from '../components/StoreDialog.vue'
import TimeintervalDialog from '../components/TimeintervalDialog.vue'

const proTableRef = ref<ProTableInstance>()
const storeDialogRef = ref<InstanceType<typeof StoreDialog>>()
const openDialog = async (title: string, data: StoreManagement.Store) => {
  const res = await getStoreTypeListAPI()
  storeDialogRef.value?.acceptParams({
    title,
    data: cloneDeep(data),
    list: res.data,
    api: editStoreAPI,
    getTableList: proTableRef.value!.getTableList,
  })
}

const timeIntervalDialogRef = ref<InstanceType<typeof TimeintervalDialog>>()
const onSetTime = async (storeId: number) => {
  const res = await getStoreMarketDetailAPI({ storeId })
  timeIntervalDialogRef.value!.acceptParams({
    title: '设置',
    data: res.data,
    api: createStoreMarketDetailAPI,
    getTableList: proTableRef.value!.getTableList,
  })
}
</script>

<template>
  <div class="auto-height-container">
    <pro-table ref="proTableRef" :columns="storeColumn" :request-api="getStoreAPI" row-key="id" title="门店列表">
      <!-- 表格 header 按钮 -->
      <!-- <template #tableHeader>
        <el-button type="primary" :icon="CirclePlus" @click="openDialog('新增')"> 新增门店 </el-button>
      </template> -->
      <!-- 表格操作 -->
      <template #id="{ row }">
        <el-button v-auth="'edit'" :icon="EditPen" link type="primary" @click="openDialog('编辑', row)">{{ row.id }}</el-button>
      </template>
      <template #operation="scope">
        <el-button v-auth="'set'" :icon="EditPen" link type="primary" @click="onSetTime(scope.row.id)">餐段设置</el-button>
        <!-- <el-button type="primary" link :icon="Delete" @click="deleteAccount(scope.row)"> 删除 </el-button> -->
      </template>
    </pro-table>
    <store-dialog ref="storeDialogRef" />
    <timeinterval-dialog ref="timeIntervalDialogRef" />
  </div>
</template>

<style lang="scss" scoped></style>
